<template>
  <div id="videolist" class="page-full-screen">
    <div>
      <el-button @click="addTit('新增')">新增</el-button>
      <!--<el-button @click="addTit('屏蔽')">屏蔽</el-button>-->
      <!--<el-button @click="addTit('显示')">显示</el-button>-->
      <!--<el-button @click="addTit('预告')">预告</el-button>-->
      <!--<el-button @click="addTit('直播中')">直播中</el-button>-->
      <!--<el-button @click="addTit('回放')">回放</el-button>-->
      <el-button @click="searchshow = !searchshow">搜索&nbsp;<i :class="{active: searchshow === true}" class="iconfont icon-zhankai" style="font-size: 12px" />
      </el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>标题</span>
          <el-input
            v-model="searchmsg.title"
            placeholder="请输入关键字"
            size="mini"
            prefix-icon="el-icon-search" />
        </div>
        <div class="main-box">
          <span>直播类别</span>
          <el-select v-model="searchmsg.status" size="mini" placeholder="请选择">
            <el-option
              v-for="item in videocates"
              :key="item.key"
              :label="item.alias"
              :value="item.key" />
          </el-select>
        </div>
        <div class="main-box">
          <span>状态</span>
          <el-radio-group v-model="searchmsg.enabled">
            <el-radio label="">全部</el-radio>
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list
      :table-data="tableData"
      :title="title"
      :btntype="btntype"
      :getimg="false"
      :pagesall="parseInt(pagesall)"
      :pages="parseInt(page)"
      @getselect="getselect"
      @changepage="changepage1"
      @getid="getid1" />
    <div v-show="showimg" class="layer">
      <div class="mask" @click="showimg = false" />
      <div class="imgcontent">
        <img :src="getmsg.img" alt="">
      </div>
    </div>
    <div v-show="seecontent" class="layer">
      <div class="mask" />
      <div v-show="addtitle !== '测试'" class="content">
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94" /></span>
        <p class="title">{{ addtitle }}直播</p>
        <div class="inputcl">
          <span class="layer-list-title">标题:</span>
          <span><el-input v-model="addvideo.title" placeholder="请输入标题" size="mini" /></span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title">作者:</span>
          <span><el-input v-model="addvideo.author" placeholder="请输入作者" size="mini" /></span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title img-list">开始时间:</span>
          <span class="imgupload">
            <el-date-picker
              v-model="addvideo.live_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择时间"
              size="mini" />
          </span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title">权限:</span>
          <span>
            <el-select v-model="addvideo.view_group" size="mini" placeholder="请选择">
              <el-option
                v-for="item in videocateadd1"
                :key="item.key"
                :label="item.alias"
                :value="item.key" />
            </el-select>
          </span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title img-list">预览图:</span>
          <span class="imgupload max-img">
            <img-upload :getimg="setimg" @getmsg="getimgmsg" />
          </span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title img-list">简介:</span>
          <span class="imgupload main-cctv">
            <editor ref="editor" />
          </span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title">直播状态:</span>
          <span>
            <el-radio-group v-model="status">
              <el-radio label="notice">预告</el-radio>
              <el-radio label="living">直播中</el-radio>
              <el-radio label="playback">回放</el-radio>
              <el-radio label="closed">关闭</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div class="clear" />
        <div class="inputcl">
          <span class="layer-list-title">状态:</span>
          <span>
            <el-radio-group v-model="addvideo.enabled">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">不可用</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div class="clear" />
        <div class="main-box" style="text-align: center">
          <span style="margin-left: 50px;"><el-button @click="addTags">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '../../common/msgbox.js'
import config from '../../common/config'
import MsgList from '../public/msgList'
import ImgUpload from '../public/imgUpload'
import editor from '../../assets/editor/editor'

export default {
  name: 'Questions',
  components: {
    ImgUpload,
    MsgList,
    editor: editor
  },
  data() {
    return {
      videocateadd1: [
        {
          alias: 'all',
          key: 'all'
        },
        {
          alias: 'vip',
          key: 'vip'
        }
      ],
      page: 1,
      addtitle: '新增',
      setimg: '',
      tcPlayer: '',
      status: '',
      vtypes: '',
      live_time: '',
      addvideo: {
        title: '',
        img: '',
        live_time: '',
        view_group: '',
        status: '',
        author: '',
        enabled: 1,
        content: ''
      },
      searchmsg: {
        status: '',
        title: '',
        enabled: ''
      },
      enabled: 1,
      btntype: ['修改', '删除', '查看地址'],
      pagesall: 0,
      videocates: [],
      videocateadd: [], // 分类数据(新增/修改)
      type: true,
      deletes: {
        ids: [],
        reason: ''
      },
      delshow: false,
      searchshow: false,
      seecontent: false,
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'title',
          label: '标题'
        },
        {
          prop: 'author',
          label: '作者'
        },
        {
          prop: 'status',
          label: '直播状态'
        },
        {
          prop: 'live_time',
          label: '直播时间'
        },
        {
          prop: 'view_group',
          label: '权限'
        },
        {
          prop: 'add_time',
          label: '上传时间'
        },
        {
          prop: 'push_url',
          label: '推流地址'
        },
        {
          prop: 'play_url',
          label: '观看地址'
        },
        {
          prop: 'enabled',
          label: '是否可用'
        }
      ],
      tableData: [],
      intro: [],
      tid: 0,
      getmsg: {},
      showimg: false
    }
  },
  watch: {
    'searchmsg.status': {
      handler() {
        this.page = 1
      }
    }
  },
  mounted() {
    this.search()
    this.types()
  },
  methods: {
    search() { // 搜索获取数据
      console.log(this.searchmsg)
      const that = this
      this.$g.ajax({
        path: 'lives/getList',
        method: 'post',
        data: {
          title: that.searchmsg.title,
          status: that.searchmsg.status,
          enabled: that.searchmsg.enabled,
          page: that.page
        },
        cbSuccess: function(data) {
          that.tableData = data.memo.list.map(item => {
            item.play_url = (Object.values(item.play_url) || []).join(' | ')
            return item
          })
          that.pagesall = parseInt(data.memo.pageTotal)
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    types() { // 获取分类数据
      this.videocates[0] = {
        alias: '全部',
        key: ''
      }
      this.videocates[1] = {
        alias: '预告',
        key: 'notice'
      }
      this.videocates[2] = {
        alias: '直播中',
        key: 'living'
      }
      this.videocates[3] = {
        alias: '回放',
        key: 'playback'
      }
      this.videocates[4] = {
        alias: '关闭',
        key: 'closed'
      }
    },
    addTit(type) {
      const that = this
      if (type === '新增') {
        this.seecontent = true
        this.addtitle = type
        this.addvideo = {
          title: '',
          img: '',
          live_time: '',
          view_group: '',
          status: '',
          author: '',
          enabled: 1,
          content: ''
        }
        this.status = ''
        this.setimg = ''
      } else if (type === '屏蔽' || type === '显示') {
        let status = ''
        if (this.deletes.ids.length < 1) {
          this.$message({
            type: 'error',
            message: '请选择需要操作的数据'
          })
        } else {
          if (type === '屏蔽') {
            status = '0'
          }
          if (type === '显示') {
            status = '1'
          }
          this.$confirm('确定' + type + '直播吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.$g.ajax({
              path: 'Lives/setEnabled/' + status,
              method: 'post',
              data: {
                ids: that.deletes.ids
              },
              cbSuccess: function(data) {
                that.search()
                that.deletes.ids = []
              },
              cbError: function(data) {
                const msg = msgbox.get(data.msg)
                that.$message.error(msg)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
      } else if (type === '预告' || type === '直播中' || type === '回放') {
        let status = ''
        if (this.deletes.ids.length < 1) {
          this.$message({
            type: 'error',
            message: '请选择需要操作的数据'
          })
        } else {
          if (type === '预告') {
            status = 'notice'
          }
          if (type === '直播中') {
            status = 'living'
          }
          if (type === '回放') {
            status = 'playback'
          }
          if (type === '关闭') {
            status = 'closed'
          }
          this.$confirm('确定修改成' + type + '吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.$g.ajax({
              path: 'Lives/setStatus/' + status,
              method: 'post',
              data: {
                ids: that.deletes.ids
              },
              cbSuccess: function(data) {
                that.search()
                that.deletes.ids = []
              },
              cbError: function(data) {
                const msg = msgbox.get(data.msg)
                that.$message.error(msg)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
      }
    },
    addTags() { // 添加/修改视频集
      const that = this
      console.log(this.addvideo)
      console.log(this.status)
      this.addvideo.content = this.$refs.editor.getContent()
      if (this.addvideo.title === '') {
        this.$message.error('标题不能为空')
      } else if (this.addvideo.author === '') {
        this.$message.error('作者不能为空')
      } else if (this.addvideo.img === '') {
        this.$message.error('封面不能为空')
      } else if (this.addvideo.live_time === '') {
        this.$message.error('直播开始时间不能为空')
      } else if (this.status === '') {
        this.$message.error('直播状态不能为空')
      } else if (this.addvideo.content === '') {
        this.$message.error('直播简介不能为空')
      } else if (this.addvideo.view_group === '') {
        this.$message.error('请选择权限')
      } else {
        this.addvideo.status = this.status
        if (this.addtitle === '新增') {
          this.$g.ajax({
            path: 'Lives/add',
            method: 'post',
            data: that.addvideo,
            cbSuccess: function(data) {
              that.seecontent = false
              that.addvideo = {
                title: '',
                img: '',
                live_time: '',
                view_group: '',
                status: '',
                author: '',
                enabled: 1,
                content: ''
              }
              that.$refs.editor.setContent({})
              that.setimg = ''
              that.search()
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
        if (this.addtitle === '修改') {
          this.$g.ajax({
            path: 'Lives/update',
            method: 'post',
            data: {
              id: that.tid,
              title: that.addvideo.title,
              img: that.addvideo.img,
              live_time: that.addvideo.live_time,
              view_group: that.addvideo.view_group,
              status: that.addvideo.status,
              author: that.addvideo.author,
              enabled: that.addvideo.enabled,
              content: that.addvideo.content
            },
            cbSuccess: function(data) {
              that.seecontent = false
              that.addvideo = {
                title: '',
                img: '',
                live_time: '',
                view_group: '',
                status: '',
                author: '',
                enabled: 1,
                content: ''
              }
              that.$refs.editor.setContent({})
              that.setimg = ''
              that.search()
            },
            cbError: function(data) {
              const msg = msgbox.get(data.msg)
              that.$message.error(msg)
            }
          })
        }
      }
    },
    changepage1(page) { // 更改page
      this.page = page
      this.search()
    },
    delhot() { // 删除视频集
      const that = this
      this.$confirm('确定删除直播吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$g.ajax({
          path: 'lives/delete',
          method: 'post',
          data: {
            ids: [that.tid]
          },
          cbSuccess: function(data) {
            that.search()
          },
          cbError: function(data) {
            const msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getid1(val) { // 获取列表button信息
      console.log(val)
      if (val.btn === '删除') {
        this.tid = val.val.id
        this.delhot()
      }
      if (val.btn === '修改') {
        this.tid = val.val.id
        // this.setimg = this.getmsg.img
        this.seecontent = true
        this.addtitle = '修改'
        const that = this
        this.$g.ajax({
          path: 'lives/getInfo',
          method: 'post',
          data: {
            id: val.val.id
          },
          cbSuccess: function(data) {
            that.getmsg = data.memo
            that.setimg = config.imgURI + data.memo.img
            that.changemsg()
          },
          cbError: function(data) {
            const msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
      if (val.btn === '预览') {
        this.getmsg = val.val
        this.showimg = true
      }
      if (val.btn === '查看地址') {
        this.$alert(`<strong>推流地址：</strong><div>${val.val.push_url}</div><br/><strong>直播地址：</strong><div>${val.val.play_url}</div>`, '查看地址', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }
    },
    getselect(vals) { // 获取多选id
      console.log(vals)
      this.deletes.ids = []
      for (const i in vals) {
        this.deletes.ids.push(vals[i].id)
      }
    },
    changemsg() {
      this.addvideo = this.getmsg
      this.status = this.getmsg.status
      this.$refs.editor.setContent(this.addvideo.content)
    },
    getimgmsg(date) { // 获取图片信息
      console.log(date)
      this.addvideo.img = date.fullName
      this.setimg = config.imgURI + date.fullName
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  display: inline-block;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.max-img {
  display: inline-block;
  max-width: 240px;
}

#videolist {
  .main-box {
    margin-top: 20px;

    span {
      margin-right: 30px;
      font-size: 14px;
      font-weight: 700;
      color: #606266;
    }

    .el-input {
      width: 240px;
    }
  }

  .main-box {
    .el-radio__inner {
      background: red;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #00a4a0 !important;
    }
  }

  .layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    overflow: hidden;

    .mask {
      background: rgba(153, 153, 153, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }

    .imgcontent {
      text-align: center;

      img {
        position: relative;
        max-width: 80%;
        max-height: 80%;
        background: #fff;
        margin: 5% auto;
        z-index: 3;
      }
    }

    .content {
      position: relative;
      width: 60%;
      max-height: 80%;
      background: #fff;
      margin: 5% auto;
      z-index: 2;
      padding: 30px;
      overflow: scroll;

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .inputcl {
        margin-top: 20px;

        .layer-list-title {
          display: inline-block;
          width: 80px;
          margin-left: 15px;
          margin-right: 10px;
          float: left;
          vertical-align: middle;
          line-height: 28px;
        }

        .img-list {
          vertical-align: top;
          float: left;
          line-height: 18px;
        }

        .imgupload {
          display: block;
          margin-left: 105px;
        }

        .main-cctv {
          min-height: 200px;
          border: 1px solid #cccccc;
        }

        .el-input {
          max-width: 200px;
        }

        img {
          width: 320px;
          height: 240px;
        }
      }

      .title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }

      .doit .one .el-input {
        width: 200px;
        margin-left: 20px;
      }

      .doit .one {
        margin-top: 20px;
        font-size: 14px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        position: relative;
        left: -4px;
      }

      .buttons {
        margin-top: 20px;
        text-align: center;

        button {
          margin: 0 20px;
        }
      }
    }
  }
}
</style>
<style>
.el-button:focus, .el-button:hover {
  color: #00a4a0;
}

.el-button:active {
  border-color: #00a0a0;
}

.el-button {
  padding: 8px 14px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #00a4a0;
  border-color: #00a4a0;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

#videolist .el-textarea__inner {
  resize: none;
}
</style>
